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Goals 

• Visual 

- Solve repeating texture artifacts 

- Flow around obstacles 

- Vary water speed and bump strength 

• Technical 

- Work with existing reflective surfaces 

- Min hardware ps2.0b (6-year-old hardware) & Xbox 360 

• Gameplay... 
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Gameplay 

• Early Left 4 Dead 2 playtests showed players were confused and 
got lost often in the swamps 

- Soft non-directional lighting 

- Trees provided too much cover 

• My theory was that water flow would improve gameplay by 
highlighting the correct path 

• We tested this theory through playtesting 

• In practice, we found testers took 17% fewer wrong turns and 
decreased the time it took to traverse the level! 
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Technical Constraints 



• Already at perf limits on the Xbox 360 & low-end PC 

• Already at memory limits on the Xbox 360 

• Our water shader had limited instructions left for our 
low end hardware ps2.0b 
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Algorithm Overview 

• Pixel shader flow, not geometric flow 

• Continue to use a normal map for water 
ripples 

• Artists author a flow map (a texture 
containing 2D flow vectors) 

• Use this flow map in a pixel shader to 
distort the normal map in the direction of 
flow 



VALVE 









SIGGRAPH2010 


Flow Texture Mapped onto Surface 

Covers entire water surface 
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Normal Map Mapped onto Surface 



Tiled over the water surface 


Normal Map 
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Artists Author Flow Maps 

• Flow map provides a unique 2D vector for every point on 
the water surface 

• Relatively low resolution: ~4 texels/meter 

• Impractical to paint directly 

• We use Houdini to create vector flow maps 
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Houdini - 


Importing 


For I Each Group 


Stamp Name FORVALUE 


Group Mask |swaiiip_grass’*‘ 
Attribute 
Tolerance 


L® 


^bi/Obstactes 


Material Palette 


^ ♦ I S obi ) Obstacles 


B -ia) ^ 


nerge2 


edirect 


merge4 




Write Read BGEO 


<S> 




































Houdini - ''Combing" 
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Vector Field 
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Houdini - Procedural Masks 
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Houdini - Applying Masks 


Operation | Brush 


Symmetry ^ Stroke ; 


Comb Normals 


Operation 


Comb Lift 


.15 


0 Keep Normal Length 


4 ^ ^ 


liillLHill FinalRotations 
I " I RENDER BOi 


A 

■ mixAttrl 


I _ I take newColours 


9 





















































































































































































































































































































































































































































































SIGGRAPH2010 


Houdini - Water Normal Maps 




Normal Map 
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• Wanted to replace our scrolling normal maps with 
flowing normal maps 

• Keep the rest of the water shader the same 

• This algorithm ultimately provides a new per-pixel 
normal generated from the normal map and flow map 
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• Nelson Max and Barry Becker 1995. Flow visualization 
using moving textures. In Proceedings of the 
ICASW/LaRC Symposium on Visualizing Time-Varying 
Data, 77-87. 
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Building on aspects of their algorithm and applying their 
approach to flowing normal maps 
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Flow Visualization 

• Inputs: flow field & noise texture 



SIGGRAPH2010 


• Distort a noise texture to visualize a flow field 


• The UV is offset by the 2D flow vector scaled by time 
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Flow Visualization Textures 
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Noise Texture 
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Flow Visualization Experiment 
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Max & Becker's Observation 

• The beginning of the distortion looks convincing 

• Only distort a small amount 

• In general, distortion looks reasonable for the 
first 1/3 of uv space 
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Smoothly Interpolating Layers 

• Blend the short animated segment in two layers 



• Each layer is offset half a phase so we can hide the 
restart for each layer 


Layer 1 Layer 2 
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Smoothly Repeating Flow 




Flow Texture 
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• We now have a method to flow a normal map 

• We want to apply this to a larger surface 

• But applying this to a large surface means tiling our 
normal map which will cause artifacts... 
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Portal 2 Test Map 
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Flow Vectors on Water Surface 
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Single Layer Normal Distortion 




Flow Vectors 
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Double Layer Normal Distortion 
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Two Major Problems 

• Repetition - The same normals will flow 
through the same point on the mesh 



• Pulsing - The surface appears to pulse in a 
repeating pattern 
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Repetition Visualization Single Layer 




Flow Vectors 











Normal Map 
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Double Layer 




Flow Vectors 



Normal Map 
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Double Layer With Offset 




Flow Vectors 



Normal Map 
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Repetition Solved by Offset 




Flow Vectors 
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Pulsing Solved by Noise 




Noise Texture 
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Pulsing Solved by Noise 




Flow Vectors 



Noise Texture 
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Water Speed Affects Normals 

We scale down the strength of the normal in tangent space by the 
flow speed (Flow speed is the length of the 2D flow vector) 

Flat Normal 

‘ Normal 



Strong Normal 






Performance 

Compared to scrolling two normal maps: 

• Additional texture fetches: 2 - flow & noise 
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• Additional arithmetic pixel shader instructions: 21 
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Water Flow in Portal 2 

• Wanted to also flow debris in dirty water 
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• Needed to modify our algorithm to support flowing a 
color map 
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Debris Flow Example 




Flow Vectors 
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Debris Flow Example 
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Flow Texture 
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Debris Normal (Same as before) 




Flow Vectors 
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Flowing Debris Using Same Algorithm ^ 
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Flowing Normals 

• Flowing normals would repeat 
an interval from zero to some 
fraction with the peak (center) 
of the interval at half distortion 


0.0 


Distortion Opacity 
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3.0 
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Flowing Debris 

• Flowing colors works better by 
offsetting the interval from - 

fraction tO +fraction SO the 

peak of the interval is at zero 
(the at-rest position) 


- 1.0 


Distortion Opacity 


Layer 1 


Layer 2 
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Flowing Debris Using Offset 
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Flow Vectors 
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Debris Flow 




Flow Vectors 
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Future Work 

• Flow height maps and use tessellation hardware 

• Multiple frequencies of normal maps 

• Render dynamic flow vectors per-frame so animated 
objects cause flow changes 

• Use flow map with our physics simulation to have 
objects flow on the water surface using the same data 
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Summary 



• Use an artist-authored flow map 

• Flow the normals in two layers and combine 

• Use noise to reduce pulsing artifact 

• Offset each phase of animation to reduce repetition 

• Flowing debris uses an offset distortion range that favors 
less distortion than the normal flow 
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Thank You! 


Water textures created by Alireza Razmpoosh 
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Alex Vlachos, Valve 
alex@valvesoftware.conn 
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